<template>
  <div class="admin-pro-list">
    <div class="admin-pro-list-nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin/index/home' }"
          ><i class="el-icon-s-home"> 首页</i></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a href="/admin/index/order"
            ><i class="el-icon-s-order">预约订单</i></a
          ></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="admin-pro-list-select">
      <span>订单编号</span>
      <input v-model="proname" type="text" placeholder="请输入产品名称" />

      <el-button>查询</el-button>
    </div>

    <div class="admin-deal-money-btn">
      <el-button type="primary">全部订单</el-button>
      <el-button type="success">已完成</el-button>
      <el-button type="success">医师</el-button>
      <el-button type="success">美容师</el-button>
      <!-- <el-button style="background-color: #7FFFD4">当月订单</el-button> -->
    </div>
    <div class="admin-pro-list-pro">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" name="" id="" />订单编号</th>
            <th>宠物名称</th>
            <th>预约事务</th>
            <th>预约医师/美容师</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td><input type="checkbox" />98775</td>
            <td>金毛</td>
            <td>洗澡</td>
            <td>大鹏</td>
            <td>
              <el-button type="primary" style="line-height: 10px">编辑</el-button>
              <el-button type="danger" style="line-height: 10px">删除</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    let url = ``;
    this.axios.get(url).then((res) => {
      console.log(res);
      this.tableData = res.data.data;
    });
  },
  data() {
    return {
      time: "",
      proname: "",
      currentPage: 1,
      tableData: [],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-pro-list {
  .admin-pro-list-select {
    display: flex;
    line-height: 40px;
    margin: 20px 0;
    span {
      margin-right: 10px;
    }
    input {
     padding: 10px;

      margin-right: 10px;
    }
  }
  .admin-pro-list-add {
    width: 98%;
    border: 1px solid rgba(182, 181, 182, 0.4);
    padding: 10px;
    a {
      margin-right: 10px;
    }
  }
  .admin-deal-money-btn {
    border: 1px solid rgba(222, 222, 222, 0.4);
    padding: 10px;
  }
  .admin-pro-list-pro {
    margin-top: 10px;
    width: 99%;
    // border: 1px solid rgba(182, 181, 182, 0.4);
    table {
      width: 100%;
      text-align: center;
      border-collapse: collapse;
      tr {
        display: flex;
      }
      th{
        padding: 10px 0;
        width: 23%;
        border: 1px solid gray;
        min-width: 230px;
      }
      td {
        padding: 4px 0;
        line-height: 32px;
        width: 23%;
        border: 1px solid gray;
        min-width: 230px;
      }
    }
  }
  .block {
    float: right;
  }
}
</style>